<template lang="pug">
  Form(ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit")
    FormItem.mt-35rem.mb-35rem.border-b(prop="userName")
      Input(v-model="form.userName" placeholder="请输入登录名/手机号码")
        span(slot="prepend")
          i.iconfont.icon-zhanghaodenglu
    FormItem.mb-55rem.border-b(prop="password")
      Input(type="password" v-model="form.password" placeholder="请输入密码")
        span(slot="prepend")
          i.iconfont.icon-mimadenglu
    //- FormItem.green
      Checkbox(v-model="remember" @on-change="rememberChange") 记住密码
    FormItem
      .login-btn(@click="handleSubmit")
        Icon(v-if="loading" type="ios-loading" size=18 class="demo-spin-icon-load")
        span 登录
</template>
<script>
import Cookies from 'js-cookie'
export default {
  name: 'LoginForm',
  props: {
    loading: Boolean,
    userNameRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '账号不能为空', trigger: 'blur' }
        ]
      }
    },
    passwordRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  data () {
    return {
      remember: false,
      form: {
        userName: '',
        password: ''
      }
    }
  },
  computed: {
    rules () {
      return {
        userName: this.userNameRules,
        password: this.passwordRules
      }
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.$emit('on-success-valid', {
            userName: this.form.userName,
            password: this.form.password
          })
        }
      })
    },
    rememberChange (val) {
      if (val) {
        Cookies.set('user_name', this.form.userName)
        Cookies.set('user_pw', this.form.password)
      } else {
        Cookies.set('user_name', '')
        Cookies.set('user_pw', '')
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .mt-35rem{
    margin-top: .35rem;
  }
  .mb-35rem{
    margin-bottom: .35rem;
  }
  .mb-55rem{
    margin-bottom: .55rem;
  }
  .login-btn{
    height: .44rem;
    background-image: url('../../assets/images/button.png');
    background-size: 100% 100%;
    background-position: center;
    text-align: center;
    font-size: .20rem;
    color: #000;
    border: none;
    line-height: .44rem;
    font-weight: 523;
    cursor: pointer;
  }
  .iconfont{
    color: rgb(0,255,255);
  }
  .border-b{
    border-bottom: 1px solid rgba(0,255,255,0.5);
  }
  // .login-btn {
  //   width: 100%;
  //   height: .42rem;
  //   border-radius: .42rem;
  //   text-align: center;
  //   line-height: .42rem;
  //   font-size: .2rem;
  //   color: #333;
  //   cursor: pointer;
  //   // background-color: #0ff; /* 原始风格 */
  //   background-color: #ffee99; /* 不支持线性的时候显示 */
  //   background-image: linear-gradient(to right, #dbb976 , #ffee99);
  //   box-shadow: 0px 5px 5px rgba(0,13,0,.1);
  // }
  // .iconfont{
  //   color: rgb(191,134,19);
  //   font-size: .16rem;
  // }
  // .border-b{
  //   border-bottom: 1px solid rgba(191,134,19,0.5);
  // }

  
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50%  { transform: rotate(180deg);}
    to   { transform: rotate(360deg);}
  }
  .demo-spin-col{
    height: 100px;
    position: relative;
    border: 1px solid #eee;
  }
</style>
